<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>--</title>
		<meta name=keywords content="聊天室" />
		<meta name="description" content="聊天室" />
		<link href="skin/blue/skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var XH_Uname;
var XH_Fid="F1";		//定义房间ID,可建立不同房间
var XH_Yname="客服";		//默认聊天对象
var XH_FaceUrl="/images/face/";	//定义表情图片目录
var XH_ContentH=360;
var XH_ContentW=680;		//显示区宽度
var XH_SendTimer="1500";	//设置发言间隔时间限制 1500 表示1.5秒内只能发言一次
var SendMess="",SendTimer,AllMsgNum=0,OnMsgNum=0;
//以下设置不要更改========================================
var XH_MsgColor="";	//内容区文本色
var CatOne=0,CatTwo=0,CatRee=1,CatOur=1,CatIve=1;	//定义各按钮默认值

function $$(){
	return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
}
var XH_SendNum=0;
//发送信息
function SendMsg() {
	var Mess=$$("Msg").value;

		//输入信息
		if (Mess=="") {
			AddMsg('系统','','发送的信息内容不能为空',1);
			return;
		}
		//输入空格
		if (Mess.substring(0,1)==" ") {
			AddMsg('系统','','发送的信息首字符不能为空格哦~',1);
			return;
		}
		//
		if(Mess.substring(0,7)=="//name:"){
			ChangeName();
			return;
		}
		if (XH_SendNum!=0){
			AddMsg('系统','','管理员设定<font color=#0000ff>'+(XH_SendTimer/1000)+'</font>秒内只能发言一次',1);
			return;
		}

	Mess=Mess.replace(/(\ )/g,'　');
	Mess=Mess.replace(/(\+)/g,'＋');
	XH_SendNum=1;
	//清除settimeout,输入框值
	clearTimeout(SendTimer);$$("Msg").value="";
	s(4);
	XH_Uname = $$('YourName').innerHTML;
	if(XH_Uname.length > 0){
		AjaxGet('mes_show.action',0,Mess,XH_Uname,XH_Yname,XH_MsgColor);
	}else{
		alert("请选择回答的对象!!!");
	}
	window.setTimeout("XH_SendNum=0",XH_SendTimer);
}

//将获取的数据转换
function AddMsg(UName,YName,Msg,Types) {
	//Types=parseInt(Types);
	switch (UName) {
		case "系统":
			var MsgList="<a class='Lcss0'>系统提示：</a><font color='#FF8A00'>"+Msg+"</font>";s(3);
		break;
		default :
			if(UName==XH_Uname) 
			{
				$("#MsgContent").html(Msg);
				if (CatRee==1){
					window.setTimeout("$$('MsgContent').scrollTop=$$('MsgContent').scrollHeight",100);
				}
				return;
			}
			else if(YName==XH_Uname) 
			{
				var MsgList="<a onclick=\"CYname('"+UName+"')\" class='Lcss2'>"+UName+"</a> 对 <a class='Lcss1'>我</a> 说: "+Msg;
				s(5)
			}
			else {
				var MsgList="<a onclick=\"CYname('"+UName+"')\" class='Lcss3'>"+UName+"</a> 对 <a onclick=\"CYname('"+YName+"')\" class='Lcss3'>"+YName+"</a> 说: "+Msg;
				s(4)
			}
		break;
	}
	$("#MsgContent").html($("#MsgContent").html()+MsgList);
	if (CatRee==1){
		window.setTimeout("$$('MsgContent').scrollTop=$$('MsgContent').scrollHeight",100);
	}
}

//数据提交
function AjaxGet(URL,Tnum,Mess,Uname,Yname,MsgColor) {
	if (Tnum==0)
	{
		$.post(URL,{replyMessage:encodeURIComponent(Mess),uname:encodeURIComponent(Uname),yname:encodeURIComponent(Yname),color:encodeURIComponent(MsgColor)},function(htm){
			//$("#MsgContent").html(htm);
			AddMsg(XH_Uname,"",htm,0);
			SendTimer=window.setTimeout("AjaxGet('mes_reqUser.action',0,'',$$('YourName').innerHTML)",5000);
		});
	}
	else{
		XH_Uname = Uname;
		$.post(URL,{replyMessage:encodeURIComponent(Mess),uname:encodeURIComponent(Uname),yname:encodeURIComponent(Yname),color:encodeURIComponent(MsgColor)},function(htm){
			//$("#MsgContent").html(htm);
			AddMsg(XH_Uname,"",htm,0);
		});
	}
	
}

//发送其它
function SendOther(Desc,Types) {
	switch (Types) {
		case "face":
			$$("Msg").value+="[F"+Desc+"]";
			if (CatOur==1) {
				SendMsg();
			}
			break;
		case "color":
			$$("Msg").style.color="#"+Desc;
			XH_MsgColor=Desc;
			AddMsg('系统','','<font color=#'+Desc+'>聊天文字颜色已更改</font>',1);
			break;
		default:
			$$("Msg").value+="//"+Desc;
			if (CatOur==1) {
				SendMsg();
			}
			break;
		}
	}

//修改昵称
function ChangeName() {
	var Mess=$$("Msg").value;
	Mess=Mess.substring(7,15);
	if(Mess.length<2) {
		AddMsg('系统','','昵称不能低于2个字符',1);
		return;
	}
	if(confirm("您确定要将昵称更改为 "+Mess+" ?")) {
		XH_Uname=Mess;
		AddMsg('系统','','您的昵称已更改为 <b>'+XH_Uname+'</b>',1);
		$$("Myname").innerHTML=XH_Uname;
		}else{
		AddMsg('系统','','已取消昵称更改操作',1);
		}
	$$("Msg").value="";
}
var HitRobot=0;	//0为第一次点击机器人
//改变聊天对象
function CYname(Yname) {
	XH_Uname == Yname;
	XH_Yname=Yname;
	$$("YourName").innerHTML=Yname;
	$.post("chat_reg.action",{user:encodeURIComponent(Yname)});
	AjaxGet('mes_reqUser.action',0,Yname,Yname,'','');
	s(2);
}

//改变CSS
function c(_Id,_Name) {
	$$(_Id).className=_Name;
}
//音效
function s(ID) {
	if (CatIve==0){ return;}
	var OBJ = document["SE"];
	try{
		OBJ.GotoFrame(0);OBJ.GotoFrame(ID);
	}
	catch(err){}
}
//顶部菜单
var OnMenu="M1";	//定义默认激活的菜单
function ChangeMenu(Mou,Did) {
	switch (Mou) {
		case "over":
			if(OnMenu!=Did){
				c(Did,'Menu_On');
				s(1);
			}
			break;
		case "out":
			if(OnMenu!=Did){c(Did,'Menu')}
			break;
		case "click":
			if(OnMenu!=Did){
				c(OnMenu,'Menu');OnMenu=Did;
				c(Did,'Menu_Down');
				s(2);
			}
			break;
	}
}
function ChangeCat(Mou,Did) {
	var _Type=0;
	switch (Mou) {
		case "over":
		$$(Did).className=$$(Did).className+"_On";
		break;
		case "out":
		if ($$(Did).className=="But1_On"){$$(Did).className="But1"}else{$$(Did).className="But2";};
		break;
		case "click":
		if ($$(Did).className=="But1_On")
		{	
			$$(Did).className="But2_On";
			_Type=1
		}else{
			$$(Did).className="But1_On";
		}

		//if (Did=="Cat1")CatOne=_Type;
		//处理分屏
		//	if (Did=="Cat2") {CatTwo=_Type;
		//	if(_Type==1) {
		//		$$("MsgContent").style.height=(XH_ContentH-184)+"px";
		//		$$("MyContent").style.height="180px";
		//		$$("MyContent").style.display="";
		//		}else{
		//		$$("MsgContent").style.height=XH_ContentH+"px";
		//		$$("MyContent").style.display="none";
		//		}
		//	}
		if (Did=="Cat3")CatRee=_Type;
		if (Did=="Cat4")CatOur=_Type;
		if (Did=="Cat5")CatIve=_Type;
		s(2);
		break;
		}
	//$$("Msg").value="a="+CatOne+" B="+CatTwo+" C="+CatRee+" D="+CatOur
}


var FaceStr="";	//表情
var ColorStr="";//颜色

//层打开效果
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
	$$("DivLoad").innerHTML="";
	OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
	$$("DivLoad").style.display='';
	$$("DivLoad").style.border="1px #666666 dashed";
	$$("DivLoad").style.backgroundColor="";
	$$("DivLoad_Bg").style.display='';
	var _H=document.body.scrollHeight;if(_H<document.documentElement.clientHeight)_H=document.documentElement.clientHeight;
	$$("DivLoad_Bg").style.height=_H+"px";
	if(_Dw>_Dh){
		ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50));
	}else if(_Dw<_Dh){
		ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50));
	}
	OpenNow();
	s(6);
}
var Nw=10,Nh=10;
function OpenNow() {
	if (Nw>OverW-ChangeW){
		ChangeW=1;
	}
	if (Nh>OverH-ChangeH){
		ChangeH=1;
	}
	Nw=Nw+ChangeW;
	Nh=Nh+ChangeH;

	if(OverW>Nw||OverH>Nh) {
		if(OverW>Nw) {
		$$("DivLoad").style.width=Nw+"px";
		var _L=(document.documentElement.clientWidth-Nw)/2+90;
		if(_L<0)_L=0;
			$$("DivLoad").style.left=_L+"px";
		}
		if(OverH>Nh) {
			$$("DivLoad").style.height=Nh+"px";
			var _T=(document.documentElement.clientHeight-Nh)/2;
			if(_T<0){
				_T=0;
			}
			$$("DivLoad").style.top=_T+"px"
		}
			window.setTimeout("OpenNow()",10)
	}else{
		Nw=10;Nh=10;ChangeH=50;ChangeW=50;
		$$("DivLoad").style.border="1px #76ABD3 solid";
		$$("DivLoad").style.backgroundColor="#ffffff";
//这里是开始加载时的loading事件,可以插入图片
        $$("DivLoad").innerHTML="Loading...";
		switch (ChangeDesc) {
			case "face":
				//if(FaceStr=="") {
				//	var ii=1;for(var i=0;i<=134;i++) {
				//	FaceStr+="<td align=center onmouseover=\"this.style.backgroundColor='#CFE5FE'\" onmouseout=\"this.style.backgroundColor=''\"><img src='"+XH_FaceUrl+i+".gif' onclick=\"SendOther("+i+",'face')\"></td>";
				//	ii++;
				//	if(ii==16&&i<134) {FaceStr+="</tr><tr style='background:#ffffff'>";ii=1}
				//	}
				//FaceStr="<table style='margin:2px;background:#cccccc;width:480px' cellSpacing=1 cellPadding=1><tr>"+FaceStr+"</tr></table>";
				if(FaceStr=="") {
					var ii=1;for(var i=0;i<=134;i++) {
					FaceStr+="<td align=center onclick=\"SendOther("+i+",'face')\" style='cursor:pointer'>&nbsp;</td>";
					ii++;
					if(ii==16&&i<134) {FaceStr+="</tr><tr>";ii=1}
				}
				FaceStr="<table style='margin:2px;background:url(/chat/j/images/face.gif);width:480px;height:244px;' cellSpacing=0 cellPadding=0><tr>"+FaceStr+"</tr></table>";
				}
			$$("DivLoad").innerHTML=FaceStr;
			break;
			case "color":
				if(ColorStr=="") {
					var _C="000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,DDDDDD";
					var ii=1;for (var i=0;i<40;i++) {
						ColorStr+="<td onmouseover=\"this.style.border='1px #1A78A8 solid'\" onmouseout=\"this.style.border='1px #C0E8FD solid'\" onclick=\"SendOther('"+_C.split(",")[i]+"','color')\" style='border:1px #C0E8FD solid;background:#"+_C.split(",")[i]+"'>&nbsp;</td>";
						if(ii==8&&i<39) {ColorStr+="</tr><tr>";ii=1;}else{ii++;}
						}
				ColorStr="<table style='margin:2px;width:300px;height:140px;border:1px #cccccc solid' cellSpacing=5 cellPadding=0><tr>"+ColorStr+"</tr></table>"
				}
			$$("DivLoad").innerHTML=ColorStr;
			break;
			//	AjaxGet(ChangeDesc,1);
			}
		}
}
function CloseLoad() {
if(Nw!=10) return;
$$("DivLoad").style.display='none';
$$("DivLoad_Bg").style.display='none';
}
//层打开效果结束


window.onload = function(){
//调整工作区大小
$$("MsgContent").style.height=XH_ContentH+"px";
$$("MsgContent").style.width=XH_ContentW+"px";
//AjaxGet(URL,Tnum,Mess,Uname,Yname,MsgColor) {
$$("Myname").innerHTML='客服';
AddMsg('系统','','<b>'+XH_Yname+'</b>,您好,欢迎使用在线客服!',0);
}
</script>
<script type="text/javascript" src="/chat/js/jquery.js"></script>
	</head>
	<body scroll=no>
		<table id="WinMain" align=center cellpadding="0" cellspacing="0">
			<tr>
				<td style="height: 72px">
					<table class="WinTable" cellpadding="0" cellspacing="0">
						<tr>
							<td class="WinTd1"></td>
							<td class="WinTd2" valign=top>
								<!--第一层-->
								<table class="WinTable" cellpadding="0" cellspacing="0">
									<tr>
										<td class="WinTop1">
											&nbsp;
										</td>
									</tr>
									<tr>
										<td class="WinTop2">
											<div id='M1' class='Menu_Down'
												onmouseover="ChangeMenu('over',this.id)"
												onmouseout="ChangeMenu('out',this.id)"
												onclick="ChangeMenu('click',this.id)">
												在线聊天
											</div>
										</td>
									</tr>
									<tr>
										<td class="WinTop3">
											&nbsp;
										</td>
									</tr>
								</table>
							</td>
							<td class="WinTd3"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td class="WinCenter">

					<table class="WinTable" cellpadding="0" cellspacing="0">
						<tr>
							<td class='ContentLeft' valign=top>
								<!--左边菜单区-->
								<div class='ContentTitle'>
									<img src='images/b.gif' align=left class='ContentTitle_L' />
									<img src='images/b.gif' align=right class='ContentTitle_R' />
									<ul>
										<li>
											<img src="images/b.gif" align="top" class="UserIco" />
											<span style="font-family: 宋体" id='Myname'>Loading...</span>
										</li>
									</ul>
								</div>
								<div class='WinLeft' style="height:360px;overflow-y: auto;overflow-x: hidden;" id="WinOnLine">
								</div>
							</td>
							<!--中部按钮-->
							<td class='ContentCenter'>
								<!-- <img src='images/b.gif' class='CloseImg1' /> -->
							</td>
							<td valign=top>
								<!--右边标题栏-->
								<div class='ContentTitle'>
									<img src='images/b.gif' align=left class='ContentTitle_L' />
									<img src='images/b.gif' align=right class='ContentTitle_R' />
									<ul>
										<li>
											标题栏
										</li>
									</ul>
								</div>
								<div class='ContentRight'>
									<!--信息内容区-->
									<div id='MsgContent' class="MessContent"></div>
									<div id='MyContent' class="MessContent" style="display: none">
										<div
											style='border-top: 1px #76ABD3 solid; border-bottom: 1px #76ABD3 solid; height: 6px; overflow: hidden; background: #A9D5F4'></div>
										分屏功能正在开发中...
									</div>

									<div class='ContentMenu'>
										<table class="WinTable" cellpadding="0" cellspacing="0">
											<tr>
												<td class="ContentF1"></td>
												<td class="ContentF2"></td>
												<td class="ContentF3" valign=top>
													<!--底中部-->
													<table class="WinTable" cellpadding="0" cellspacing="0">
														<tr>
															<td style="height: 22px" onselectstart='return false'>
																<!--底部小按钮区 -->
																<table class="WinTable" cellpadding="0" cellspacing="0">
																	<tr>
																		<td class='But2' id='Cat3'
																			onmouseover="ChangeCat('over',this.id)"
																			onmouseout="ChangeCat('out',this.id)"
																			onclick="ChangeCat('click',this.id)"
																			title='有新的信息自动滚动到底部'>
																			滚屏
																		</td>
																		<td class='ButLine'>
																			&nbsp;
																		</td>
																		<td class='But2' id='Cat4'
																			onmouseover="ChangeCat('over',this.id)"
																			onmouseout="ChangeCat('out',this.id)"
																			onclick="ChangeCat('click',this.id)"
																			title='选择表情等操作后自动发送'>
																			自动
																		</td>
																		<td class='ButLine'>
																			&nbsp;
																		</td>
																		<td class='But2' id='Cat5'
																			onmouseover="ChangeCat('over',this.id)"
																			onmouseout="ChangeCat('out',this.id)"
																			onclick="ChangeCat('click',this.id)" title='背景音效'>
																			音效
																		</td>
																		<td>
																			&nbsp;
																		</td>

																		<td class='But3' id='Ico1'
																			onmouseover="c(this.id,'But3_On')"
																			onmouseout="c(this.id,'But3')"
																			onmousedown="c(this.id,'But3_Down')"
																			onclick="c(this.id,'But3_On');OpenDiv(485,249,'face')">
																			<img src='images/b.gif'
																				style='background: url(/chat/j/skin/blue/ico.gif) -17px 0px no-repeat'
																				class='Ico' alt='表情' />
																		</td>
																		<td class='ButLine2'>
																			&nbsp;
																		</td>
																		<td class='But3' id='Ico2'
																			onmouseover="c(this.id,'But3_On')"
																			onmouseout="c(this.id,'But3')"
																			onmousedown="c(this.id,'But3_Down')"
																			onclick="c(this.id,'But3_On');OpenDiv(305,145,'color')">
																			<img src='images/b.gif'
																				style='background: url(/chat/j/skin/blue/ico.gif) -36px 0px no-repeat'
																				class='Ico' alt='颜色' />
																		</td>
																		<td class='ButLine2'>
																			&nbsp;
																		</td>
																		<td class='But3' id='Ico3'
																			onmouseover="c(this.id,'But3_On')"
																			onmouseout="c(this.id,'But3')"
																			onmousedown="c(this.id,'But3_Down')"
																			onclick="c(this.id,'But3_On')">
																			<img src='images/b.gif'
																				style='background: url(/chat/j/skin/blue/ico.gif) -55px 0px no-repeat'
																				class='Ico' alt='字体' />
																		</td>
																		<td class='ButLine2'>
																			&nbsp;
																		</td>
																		<td class='But3' id='Ico4'
																			onmouseover="c(this.id,'But3_On')"
																			onmouseout="c(this.id,'But3')"
																			onmousedown="c(this.id,'But3_Down')"
																			onclick="c(this.id,'But3_On')">
																			<img src='images/b.gif'
																				style='background: url(/chat/j/skin/blue/ico.gif) -74px 0px no-repeat'
																				class='Ico' alt='图片' />
																		</td>
																		<td class='ButLine2'>
																			&nbsp;
																		</td>
																		<td class='But3' id='Ico5'
																			onmouseover="c(this.id,'But3_On')"
																			onmouseout="c(this.id,'But3')"
																			onmousedown="c(this.id,'But3_Down')"
																			onclick="c(this.id,'But3_On')">
																			<img src='images/b.gif'
																				style='background: url(/chat/j/skin/blue/ico.gif) -93px 0px no-repeat'
																				class='Ico' alt='点歌' />
																		</td>
																	</tr>
																</table>
															</td>
														</tr>
														<tr>
															<td hgcolor="#cccccc" style="height: 22px">
																<!--信息发送区-->
																<table class="WinTable" style="height: 100%"
																	cellpadding="0" cellspacing="0">
																	<tr>
																		<td class='MsgLeft' id="YourName"></td>
																		<td class='MsgRight'>
																			<input name='Msg' style="border-left: groove 1px #33CCCC" id='Msg' maxlength=80
																				onKeyUp="if(event.keyCode==13){SendMsg()}" />
																		</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
												</td>
												<td class="ContentF4">
													<img src='images/b.gif' id='Ico0' class='SendBut'
														onmouseover="s(1);c(this.id,'SendBut_On')"
														onmouseout="c(this.id,'SendBut')"
														onmousedown="c(this.id,'SendBut_Down')"
														onclick="c(this.id,'SendBut_On');SendMsg()" />
												</td>
											</tr>
										</table>
									</div>

								</div>
							</td>
						</tr>
					</table>

				</td>
			</tr>
			<tr>
				<td style="height: 12px">
					<!--第三层-->
					<table class="WinTable" cellpadding="0" cellspacing="0">
						<tr>
							<td class="WinTd4"></td>
							<td class="WinTd5">
								&nbsp;
							</td>
							<td class="WinTd6"></td>
						</tr>
					</table>

				</td>
			</tr>
		</table>
		<div id="DivLoad_Bg" onclick="CloseLoad()" title="任意位置单击即关闭"
			style="display: none"></div>
		<div id="DivLoad" style="display: none" onclick="CloseLoad()"></div>
		<script type="text/javascript">
			$('#WinOnLine').load("/chat/j/userList.jsp");
			setInterval("$('#WinOnLine').load('/chat/j/userList.jsp')",1000);
			setInterval("$('#YourName').load('/chat/kf/userList.jsp')",500);
			AjaxGet('mes_reqUser.action',0,'',$$('YourName').innerHTML);
		</script>
		<embed src="/chat/j/images/sound.swf" id=SE name=SE width=0 height=0
			type="application/x-shockwave-flash" />
	</body>
</html>
